<!DOCTYPE html>
<html class="overflow-hidden">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>礼仪之邦-我的订单</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body class="overflow-hidden">
<div class="collect-bar register-bar order-bar">
    <div class="header-box pos-abs-tl">
        <div class="header-goBack">
            <a class="go-back-btn sprite-icon" href="javascript:;"></a>
        </div>
        我的订单
    </div>

    <div class="collect-cont">
        <div id="wrapper">
            <div id="scroller">
                <div class="order-content">
                    <div class="order-area">
                        <a href="address.html">
                            <div class="add-user">
                                <span class="add-user-name text-overflow">徐继强</span>
                                <span class="add-user-phone">13628332957</span>
                            </div>
                            <div class="add-location text-clamp-overflow">
                                <i class="shopType-sprite-icon"></i>
                                重庆市 重庆市 江北区 观音桥街道，建北一村78号6-1
                            </div>
                        </a>
                    </div>
                    <div class="stores-order">
                        <div class="collect-list shopCar-list order-page-list none-more">
                            <div class="stores-order-bar background-f4f8ff">
                                <div class="stores-name none-background">
                                    <a href="javascript:;">
                                        <div class="pull-left text-overflow">
                                            <i class="sprite-icon"></i>
                                            <span>赏点工坊</span>
                                        </div>
                                        <div class="stores-activity pull-right stores-activity-new">
                                            <i class="s-tips">优惠</i>
                                            <span>满99999元免运费</span>
                                        </div>
                                    </a>
                                </div>
                            </div>
                            <ul>
                                <li>
                                    <div class="collect-intro">
                                        <a href="#">
                                            <label class="collect-img">
                                                <img src="img/collect-img.jpg">
                                                <!--<i class="shopType-sprite-icon presell-icon"></i>-->
                                            </label>

                                            <div class="collect-intro-text">
                                                <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨祥云和山茶油家庭
                                                    压榨祥云和山茶油家庭装1L压榨祥云和山</p>

                                                <div class="product-norms text-overflow">蓝色,34码</div>

                                                <p class="collect-price" data-price="148.00">￥148.00元</p>

                                                <div class="number-box pos-abs-br">
                                                    <div class="number-bar">
                                                        <label class="num-btn-box num-btn-cut">
                                                            <span class="num-cut sprite-icon"></span>
                                                        </label>
                                                <span class="num-input" data-max="10">
                                                    <input value="1" type="text" readonly>
                                                </span>
                                                        <label class="num-btn-box num-btn-add">
                                                            <span class="num-add sprite-icon"></span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <div class="collect-intro">
                                        <a href="#">
                                            <label class="collect-img">
                                                <img src="img/collect-img.jpg">
                                                <i class="shopType-sprite-icon presell-icon"></i>
                                            </label>

                                            <div class="collect-intro-text">
                                                <p class="collect-name text-clamp-overflow">祥云和山茶油家庭装1L压榨祥云和山茶油家庭
                                                    压榨祥云和山茶油家庭装1L压榨祥云和山</p>

                                                <p class="collect-price" data-price="148.00">￥148.00元</p>

                                                <div class="number-box pos-abs-br">
                                                    <div class="number-bar">
                                                        <label class="num-btn-box num-btn-cut">
                                                            <span class="num-cut sprite-icon"></span>
                                                        </label>
                                                <span class="num-input" data-max="10">
                                                    <input value="1" type="text" readonly>
                                                </span>
                                                        <label class="num-btn-box num-btn-add">
                                                            <span class="num-add sprite-icon"></span>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                            <div class="stores-information clearfix">
                                <span class="pull-left">运费</span>
                                <span class="pull-right">￥5.00</span>
                            </div>
                            <div class="stores-information clearfix">
                                <span class="pull-left">发票信息</span>

                                <div class="pull-right">
                                    <div class="switch-box pos-abs-tr">
                                        <a class="switch-bar pos-abs-tr" href="javascript:;">
                                            <i></i><input id="open" type="checkbox" value="">
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="stores-information clearfix">
                                <div class="pull-right stores-price">
                                    <span>共 7 件商品</span>
                                    <label>小计：<span>￥<i>50</i>.00</span></label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="order-intro">
                        <div class="register-cont no-margin">
                            <ul>
                                <li class="no-padding">
                                    <div class="register-input line-black padding-left no-padding">
                                        <label>备注信息：</label>
                                        <input class="pwd" placeholder="填写你的要求（50字以内）" value="" type="text"
                                               maxlength="50">
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="order-price has-bto-border">
                        <div class="stores-information clearfix">
                            <span class="pull-left">商品总额：</span>
                            <span class="pull-right price-text">￥<i>50</i>.00</span>
                        </div>
                        <div class="stores-information clearfix">
                            <span class="pull-left">-满减券：</span>
                            <span class="pull-right price-text">￥<i>50</i>.00</span>
                        </div>
                        <div class="stores-information clearfix">
                            <span class="pull-left">-现金券：</span>
                            <span class="pull-right price-text">￥<i>50</i>.00</span>
                        </div>
                        <div class="stores-information clearfix">
                            <span class="pull-left">+运费：</span>
                            <span class="pull-right price-text">￥<i>50</i>.00</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="collect-bottom po-abs order-bottom">
        <div class="shop-handle list-row">
            <ul class="row-2">
                <li class="shop-handle-intro"><label>合计：￥62.00</label></li>
                <li class="shop-handle-btn">
                    <a id="ensureBtn" class="t-buy-btn active show-box" href="javascript:;">确认订单</a>
                </li>
            </ul>
        </div>
    </div>



    <div class="register-box-text animated-left">
        <div class="header-box pos-abs-tl">
            <div class="header-goBack" id="goPage">
                <a class="go-back-btn sprite-icon" href="javascript:;"></a>
            </div>
            发票信息
            <span class="has-text big-text" id="invoiceNotice">发票需知</span>
        </div>

        <div class="register-box-c stores-box-c">
            <div class="swiper-container register-swiper" style="height: 100%;">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" style="height: auto;">
                        <div class="swiper-slide-c">
                            <div class="invoice-bar">
                                <div class="stores-information clearfix">
                                    <span class="pull-left">发票类型</span>
                                </div>
                                <div class="stores-information clearfix">
                                    <span class="invoice-btn active">普通发票</span>
                                    <span class="invoice-btn">专用发票</span>
                                </div>
                            </div>
                            <div class="invoice-bar">
                                <div class="stores-information clearfix">
                                    <span class="pull-left">发票抬头</span>
                                </div>
                                <div class="stores-information clearfix">
                                    <div class="invoice-radio-bar">
                                        <div class="invoice-radio">
                                            <label class="radio-bar active">
                                                <input type="radio" name="invoiceType" value="" checked>
                                                <span></span>
                                            </label>
                                            个人
                                        </div>
                                        <div class="invoice-radio">
                                            <label class="radio-bar ">
                                                <input type="radio" name="invoiceType" value="">
                                                <span></span>
                                            </label>
                                            单位
                                        </div>
                                    </div>
                                </div>
                                <div class="stores-information clearfix" id="invoiceText" style="display: none">
                                    <label class="invoice-text"><input class="textarea" type="text" placeholder="请填写单位名称"></label>
                                </div>
                            </div>
                            <div class="invoice-bar">
                                <div class="stores-information clearfix">
                                    <span class="pull-left">发票内容</span>
                                </div>
                                <div class="stores-information clearfix">
                                    <div class="invoice-radio-bar">
                                        <div class="invoice-radio">
                                            <label class="radio-bar active">
                                                <input type="radio" name="invoiceCont" value="" checked>
                                                <span></span>
                                            </label>
                                            明细
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="index-bar" style="padding-bottom: 5px;">
                                <div class="login-btn active mar-t15">
                                    <a class="f14" href="javascript:;">确认</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="invoice-disk">
            <div class="invoice-disk-cont j-alert-ani animated">
                <h2>发票须知</h2>

                <p>1.发票金额不包含现金券、满减券、积分支付部分。</p>

                <p>2.发票内容由商家根据商品订单明细开具。</p>

                <p>3.发票邮寄随商品发出，不单独邮寄。</p>

                <p>4.发生商品退回的，需将发票随商品一同退回。</p>

                <p>5.不同商家的发票各自分别开具。</p>
                <a href="javascript:;" id="closeDisk">我知道了</a>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/box.js"></script>
<script src="js/public.js"></script>
<script>
    $(function () {
        var myScroll = publicFuns.newIScroll("#wrapper");

        //开关
        var indexSwiper;
        $("#open").click(function () {
            $(this).parents(".switch-bar").toggleClass("active");
            var checked = $(this).prop("checked");
            if (checked) {
                $(".animated-left").addClass("active");
                indexSwiper = publicFuns.newSwiper(".register-swiper", 3);
            }
        });
        $("#goPage").click(function () {
            $(".animated-left").removeClass("active");
            indexSwiper.destroy();
            indexSwiper = "";
        });

        $("#invoiceNotice").click(function () {
            $(".invoice-disk").fadeToggle();
        });

        $("#closeDisk").click(function () {
            $(".invoice-disk").fadeOut();
        });

        //单选按钮
        $(document).on("click", ".invoice-radio", function () {
            var i = $(this).index();
            var box = $(this).find(".radio-bar");
            var name = box.find("input").attr("name");
            var input = $("input[name='" + name + "']");
            if (!box.hasClass("active")) {
                input.parents(".radio-bar").removeClass("active");
                input.prop("checked", false);
                $(this).find(".radio-bar").addClass("active");
                $(this).find("input").prop("checked", "checked");
                if (name == "invoiceType" && i == 1) {
                    $("#invoiceText").show();
                } else {
                    $("#invoiceText").hide();
                }
            }
            indexSwiper.update(true);
        });


        //显示可以输入的加减法
        $(document).on("click", ".num-input", shopNumBox);
        $(document).on("click", ".num-btn-add", "add", calculate);
        $(document).on("click", ".num-btn-cut", "cut", calculate);
        function calculate(e) {
            var _self = this;
            var _max = 0;
            switch (e.data) {
                case "add":
                    _max = parseInt($(this).prev().attr("data-max"));
                    publicFuns.numberCalculate($(this).prev(), _max, "add", function () {
                        console.log("你加数字了！");
                    }, "");
                    break;
                case "cut":
                    _max = parseInt($(this).next().attr("data-max"));
                    publicFuns.numberCalculate($(this).next(), _max, "cut", "", function () {
                        console.log("你减数字了！");
                    });
                    break;
            }
        }

        function shopNumBox() {
            var _this = this;
            publicFuns.showCheckNum(_this, function () {
                var _val = parseInt($(_this).find("input").val());
                console.log("这是您输入的值：" + _val);
            })
        }

        $(window).resize(function () {
            myScroll.refresh();
        }).trigger("redize");
    })
</script>
</body>
</html>